<script setup lang="ts">
import type { PageParams, RecycleBinGroup, RecycleBinItem } from '@/types/recycle-bin'
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import {
  batchDelete,
  batchRestore,
  deleteItem as deleteItemAPI,
  formatDeleteTime,
  getExpireStatus,
  getRecycleBinContent,
  getRecycleBinItemKey,
  getRecycleBinTypeInfo,
  handleRecycleBinError,
  processRecycleBinCover,
  restoreItem as restoreItemAPI,
} from '@/api/recycle-bin'

// 弹窗引用
const restorePopup = ref()
const deletePopup = ref()
const batchRestorePopup = ref()
const batchDeletePopup = ref()

// 状态管理
const loading = ref(false)
const loadMoreStatus = ref('more')
const isEditMode = ref(false)
const restoreItem = ref<RecycleBinItem | null>(null)
const deleteItem = ref<RecycleBinItem | null>(null)
const selectedItems = ref<RecycleBinItem[]>([])

// 数据存储
const groups = ref<RecycleBinGroup[]>([])

// 分页参数
const pageParams = ref({
  page: 1,
  size: 20,
})

// 是否还有更多数据
const hasMore = ref(true)

// 是否全选
const isAllSelected = computed(() => {
  const allItems = groups.value.flatMap(group => group.items)
  return allItems.length > 0 && selectedItems.value.length === allItems.length
})

// 加载回收站内容
async function loadRecycleBinContent(isRefresh = false) {
  console.log('🔄 开始加载回收站内容', { isRefresh, currentPage: pageParams.value.page })

  try {
    if (isRefresh) {
      console.log('📝 刷新模式：重置分页参数')
      pageParams.value.page = 1
      hasMore.value = true
    }

    loading.value = isRefresh || pageParams.value.page === 1
    loadMoreStatus.value = 'loading'

    const params: PageParams = {
      page: pageParams.value.page,
      size: pageParams.value.size,
    }
    console.log('📤 发送API请求参数:', params)

    const response = await getRecycleBinContent(params)
    console.log('📥 回收站API原始响应:', response)
    console.log('📊 响应数据结构:', {
      hasResponse: !!response,
      responseCode: response?.code,
      hasData: !!response?.data,
      dataType: typeof response?.data,
    })

    // 后端返回格式：{ code: 0, data: {...}, msg: "" }
    // 成功状态码是 0，不是 200
    if (response?.code === 0) {
      console.log('✅ API响应成功 (code: 0)')

      if (response.data) {
        const responseData = response.data as any
        const { groups: newGroups, total } = responseData
        console.log('📋 解析的数据详情:', {
          total,
          groupsCount: newGroups?.length || 0,
          groups: newGroups?.map((g: any) => ({
            title: g.groupTitle,
            itemCount: g.items?.length || 0,
            items: g.items?.map((item: any) => ({
              id: item.id,
              title: item.title,
              itemType: item.itemType,
            })),
          })),
        })

        if (isRefresh) {
          console.log('🔄 刷新模式：直接替换数据')
          groups.value = newGroups || []
          console.log('📝 更新后的groups.value:', groups.value.length, '个分组')
        }
        else {
          console.log('➕ 追加模式：合并分组数据')
          const beforeCount = groups.value.length

          if (newGroups && newGroups.length > 0) {
            newGroups.forEach((newGroup: any) => {
              const existingGroup = groups.value.find(g => g.groupTitle === newGroup.groupTitle)
              if (existingGroup) {
                console.log(`🔗 合并到现有分组: ${newGroup.groupTitle}`)
                existingGroup.items.push(...newGroup.items)
              }
              else {
                console.log(`➕ 添加新分组: ${newGroup.groupTitle}`)
                groups.value.push(newGroup)
              }
            })
          }

          console.log(`📊 合并结果: ${beforeCount} -> ${groups.value.length} 个分组`)
        }

        // 更新分页参数
        pageParams.value.page++
        console.log('📄 更新分页参数:', { nextPage: pageParams.value.page })

        // 检查是否还有更多数据
        const totalItems = groups.value.reduce((sum, group) => sum + group.items.length, 0)
        hasMore.value = totalItems < total
        console.log('🔍 分页状态:', { totalItems, serverTotal: total, hasMore: hasMore.value })
      }
      else {
        console.log('⚠️ API响应data字段为空')
        if (isRefresh) {
          groups.value = []
          console.log('🧹 清空本地数据')
        }
      }
    }
    else {
      console.log('❌ API响应失败:', {
        code: response?.code,
        message: (response as any)?.msg || (response as any)?.message,
        fullResponse: response,
      })
    }
  }
  catch (error) {
    console.error('💥 加载回收站内容失败:', error)
    console.error('💥 错误详情:', {
      name: (error as Error)?.name,
      message: (error as Error)?.message,
      stack: (error as Error)?.stack,
    })

    uni.showToast({
      title: handleRecycleBinError(error),
      icon: 'none',
    })
  }
  finally {
    console.log('🏁 请求完成，更新状态:', {
      loading: false,
      loadMoreStatus: hasMore.value ? 'more' : 'noMore',
      finalGroupsCount: groups.value.length,
      finalItemsCount: groups.value.reduce((sum, group) => sum + group.items.length, 0),
    })

    loading.value = false
    loadMoreStatus.value = hasMore.value ? 'more' : 'noMore'
  }
}

// 刷新数据
async function refreshData() {
  console.log('🔄 刷新数据')
  await loadRecycleBinContent(true)
}

// 加载更多
function loadMore() {
  console.log('📄 尝试加载更多:', { hasMore: hasMore.value, loadMoreStatus: loadMoreStatus.value })
  if (hasMore.value && loadMoreStatus.value !== 'loading') {
    console.log('📄 开始加载更多数据')
    loadRecycleBinContent(false)
  }
  else {
    console.log('📄 无法加载更多:', { hasMore: hasMore.value, loadMoreStatus: loadMoreStatus.value })
  }
}

// 切换编辑模式
function toggleEditMode() {
  isEditMode.value = !isEditMode.value
  if (!isEditMode.value) {
    selectedItems.value = []
  }
}

// 检查项目是否被选中
function isItemSelected(item: RecycleBinItem) {
  return selectedItems.value.some(selected => selected.id === item.id)
}

// 切换项目选择状态
function toggleItemSelection(item: RecycleBinItem) {
  const index = selectedItems.value.findIndex(selected => selected.id === item.id)

  if (index > -1) {
    selectedItems.value.splice(index, 1)
  }
  else {
    selectedItems.value.push(item)
  }
}

// 切换全选状态
function toggleSelectAll() {
  const allItems = groups.value.flatMap(group => group.items)

  if (isAllSelected.value) {
    selectedItems.value = []
  }
  else {
    selectedItems.value = [...allItems]
  }
}

// 项目点击
function onItemClick(item: RecycleBinItem) {
  if (isEditMode.value) {
    // 编辑模式下点击选择/取消选择
    toggleItemSelection(item)
  }
  else {
    // 正常模式下显示详情或预览
    uni.showModal({
      title: '项目详情',
      content: `标题: ${item.title}\n类型: ${getRecycleBinTypeInfo(item.itemType).label}\n删除时间: ${formatDeleteTime(item.deletedAt)}`,
      showCancel: false,
    })
  }
}

// 项目长按
function onItemLongPress(item: RecycleBinItem) {
  if (!isEditMode.value) {
    uni.showActionSheet({
      itemList: ['还原', '删除'],
      success: (res) => {
        if (res.tapIndex === 0) {
          onRestoreItem(item)
        }
        else if (res.tapIndex === 1) {
          onDeleteItem(item)
        }
      },
    })
  }
}

// 还原项目
function onRestoreItem(item: RecycleBinItem) {
  restoreItem.value = item
  restorePopup.value.open()
}

// 删除项目
function onDeleteItem(item: RecycleBinItem) {
  deleteItem.value = item
  deletePopup.value.open()
}

// 批量还原选中项
function batchRestoreSelected() {
  if (selectedItems.value.length === 0)
    return
  batchRestorePopup.value.open()
}

// 批量删除选中项
function batchDeleteSelected() {
  if (selectedItems.value.length === 0)
    return
  batchDeletePopup.value.open()
}

// 返回上一页
function goBack() {
  uni.navigateBack()
}

// 确认还原项目
async function confirmRestoreItem() {
  if (!restoreItem.value)
    return

  try {
    uni.showLoading({
      title: '还原中...',
    })

    const response = await restoreItemAPI(restoreItem.value.id)
    console.log('🔄 还原项目API响应:', response)

    if (response?.code === 0) {
      const itemTitle = restoreItem.value.title

      // 重新加载数据以确保数据一致性
      await loadRecycleBinContent(true)

      // 检查是否为空状态
      const isEmpty = groups.value.length === 0
      uni.showToast({
        title: isEmpty ? '还原成功，回收站已清空' : `"${itemTitle}" 还原成功`,
        icon: 'success',
      })
    }
    else {
      console.log('❌ 还原失败:', response)
      uni.showToast({
        title: (response as any)?.msg || '还原失败',
        icon: 'none',
      })
    }
  }
  catch (error) {
    console.error('还原失败:', error)
    uni.showToast({
      title: handleRecycleBinError(error),
      icon: 'none',
    })
  }
  finally {
    uni.hideLoading()
    restorePopup.value.close()
    restoreItem.value = null
  }
}

// 取消还原项目
function cancelRestoreItem() {
  restorePopup.value.close()
  restoreItem.value = null
}

// 确认删除项目
async function confirmDeleteItem() {
  if (!deleteItem.value)
    return

  try {
    uni.showLoading({
      title: '删除中...',
    })

    const response = await deleteItemAPI(deleteItem.value.id)
    console.log('🗑️ 删除项目API响应:', response)

    if (response?.code === 0) {
      const itemTitle = deleteItem.value.title

      // 重新加载数据以确保数据一致性
      await loadRecycleBinContent(true)

      // 检查是否为空状态
      const isEmpty = groups.value.length === 0
      uni.showToast({
        title: isEmpty ? '删除成功，回收站已清空' : `"${itemTitle}" 删除成功`,
        icon: 'success',
      })
    }
    else {
      console.log('❌ 删除失败:', response)
      uni.showToast({
        title: (response as any)?.msg || '删除失败',
        icon: 'none',
      })
    }
  }
  catch (error) {
    console.error('删除失败:', error)
    uni.showToast({
      title: handleRecycleBinError(error),
      icon: 'none',
    })
  }
  finally {
    uni.hideLoading()
    deletePopup.value.close()
    deleteItem.value = null
  }
}

// 取消删除项目
function cancelDeleteItem() {
  deletePopup.value.close()
  deleteItem.value = null
}

// 确认批量还原
async function confirmBatchRestore() {
  try {
    uni.showLoading({
      title: '还原中...',
    })

    const itemIds = selectedItems.value.map(item => item.id)
    const itemCount = selectedItems.value.length
    const response = await batchRestore({ itemIds })
    console.log('🔄 批量还原API响应:', response)

    if (response?.code === 0) {
      // 清空选择并退出编辑模式
      selectedItems.value = []
      isEditMode.value = false

      // 重新加载数据以确保数据一致性
      await loadRecycleBinContent(true)

      // 检查是否为空状态
      const isEmpty = groups.value.length === 0
      uni.showToast({
        title: isEmpty ? `已还原 ${itemCount} 个项目，回收站已清空` : `已还原 ${itemCount} 个项目`,
        icon: 'success',
      })
    }
    else {
      console.log('❌ 批量还原失败:', response)
      uni.showToast({
        title: (response as any)?.msg || '批量还原失败',
        icon: 'none',
      })
    }
  }
  catch (error) {
    console.error('批量还原失败:', error)
    uni.showToast({
      title: handleRecycleBinError(error),
      icon: 'none',
    })
  }
  finally {
    uni.hideLoading()
    batchRestorePopup.value.close()
  }
}

// 取消批量还原
function cancelBatchRestore() {
  batchRestorePopup.value.close()
}

// 确认批量删除
async function confirmBatchDelete() {
  try {
    uni.showLoading({
      title: '删除中...',
    })

    const itemIds = selectedItems.value.map(item => item.id)
    const itemCount = selectedItems.value.length
    const response = await batchDelete(itemIds)
    console.log('🗑️ 批量删除API响应:', response)

    if (response?.code === 0) {
      // 清空选择并退出编辑模式
      selectedItems.value = []
      isEditMode.value = false

      // 重新加载数据以确保数据一致性
      await loadRecycleBinContent(true)

      // 检查是否为空状态
      const isEmpty = groups.value.length === 0
      uni.showToast({
        title: isEmpty ? `已删除 ${itemCount} 个项目，回收站已清空` : `已删除 ${itemCount} 个项目`,
        icon: 'success',
      })
    }
    else {
      console.log('❌ 批量删除失败:', response)
      uni.showToast({
        title: (response as any)?.msg || '批量删除失败',
        icon: 'none',
      })
    }
  }
  catch (error) {
    console.error('批量删除失败:', error)
    uni.showToast({
      title: handleRecycleBinError(error),
      icon: 'none',
    })
  }
  finally {
    uni.hideLoading()
    batchDeletePopup.value.close()
  }
}

// 取消批量删除
function cancelBatchDelete() {
  batchDeletePopup.value.close()
}

// 注意：不再使用removeItemFromGroups函数，改为重新加载数据以确保数据一致性

// 获取还原确认文本
function getRestoreConfirmText() {
  return restoreItem.value ? `确定要还原"${restoreItem.value.title}"吗？` : '确定要还原吗？'
}

// 获取删除确认文本
function getDeleteConfirmText() {
  return deleteItem.value ? `确定要永久删除"${deleteItem.value.title}"吗？此操作不可恢复！` : '确定要删除吗？'
}

// 获取批量还原确认文本
function getBatchRestoreConfirmText() {
  return `确定要还原选中的 ${selectedItems.value.length} 项内容吗？`
}

// 获取批量删除确认文本
function getBatchDeleteConfirmText() {
  return `确定要永久删除选中的 ${selectedItems.value.length} 项内容吗？此操作不可恢复！`
}

// 封面加载错误
function onCoverError() {
  console.log('封面加载失败')
}

// 页面生命周期
onLoad(() => {
  console.log('🚀 页面加载 (onLoad)')
  loadRecycleBinContent(true)
})

onShow(() => {
  console.log('👁️ 页面显示 (onShow)')
  // 页面显示时刷新数据
  refreshData()
})

// 下拉刷新
onPullDownRefresh(() => {
  refreshData().finally(() => {
    uni.stopPullDownRefresh()
  })
})

// 上拉加载更多
onReachBottom(() => {
  loadMore()
})
</script>

<template>
  <view class="trash-container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <uni-icons type="arrowleft" size="24" color="#333" />
      </view>
      <text class="nav-title">
        回收站
      </text>
      <view class="nav-actions">
        <view v-if="!isEditMode && groups.length > 0" class="action-btn" @click="toggleEditMode">
          <uni-icons type="compose" size="18" color="#333" />
          <text class="action-text">
            编辑
          </text>
        </view>
        <view v-else-if="isEditMode" class="action-btn" @click="toggleEditMode">
          <text class="action-text">
            完成
          </text>
        </view>
        <view class="refresh-btn" @click="refreshData">
          <uni-icons type="refresh" size="20" color="#333" />
        </view>
      </view>
    </view>

    <!-- 批量操作栏 -->
    <view v-if="isEditMode" class="batch-actions">
      <view class="select-all" @click="toggleSelectAll">
        <uni-icons
          :type="isAllSelected ? 'checkbox-filled' : 'checkbox'"
          size="20"
          :color="isAllSelected ? '#667eea' : '#ccc'"
        />
        <text class="select-text">
          全选
        </text>
      </view>
      <view class="batch-buttons">
        <button
          class="batch-btn restore-btn"
          :disabled="selectedItems.length === 0"
          @click="batchRestoreSelected"
        >
          还原({{ selectedItems.length }})
        </button>
        <button
          class="batch-btn delete-btn"
          :disabled="selectedItems.length === 0"
          @click="batchDeleteSelected"
        >
          删除({{ selectedItems.length }})
        </button>
      </view>
    </view>

    <!-- 提示信息 -->
    <view class="tip-bar">
      <uni-icons type="info" size="16" color="#FF9800" />
      <text class="tip-text">
        回收站内容将在30天后自动删除
      </text>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading && groups.length === 0" class="loading-container">
      <uni-load-more status="loading" content-text="{ contentText: { contentdown: '加载中...', contentrefresh: '加载中...', contentnomore: '加载中...' } }" />
    </view>

    <!-- 回收站内容 -->
    <view v-else class="trash-content">
      <!-- 空状态 -->
      <view v-if="groups.length === 0 && !loading" class="empty-state">
        <view class="empty-icon">
          <uni-icons type="trash" size="60" color="#ddd" />
        </view>
        <text class="empty-text">
          回收站空空如也
        </text>
        <text class="empty-tips">
          删除的内容会出现在这里
        </text>
      </view>

      <!-- 分组列表 -->
      <view v-else class="groups-list">
        <view
          v-for="group in groups"
          :key="group.groupTitle"
          class="group-section"
        >
          <view class="group-header">
            <text class="group-title">
              {{ group.groupTitle }}
            </text>
            <text class="group-count">
              {{ group.items.length }}项
            </text>
          </view>

          <view class="group-items">
            <view
              v-for="item in group.items"
              :key="getRecycleBinItemKey(item)"
              class="trash-item"
              :class="{ 'edit-mode': isEditMode, 'selected': isItemSelected(item) }"
              @click="onItemClick(item)"
              @longpress="onItemLongPress(item)"
            >
              <!-- 选择框 -->
              <view v-if="isEditMode" class="item-selector" @click.stop="toggleItemSelection(item)">
                <uni-icons
                  :type="isItemSelected(item) ? 'checkbox-filled' : 'checkbox'"
                  size="20"
                  :color="isItemSelected(item) ? '#667eea' : '#ccc'"
                />
              </view>

              <view class="item-cover">
                <image
                  :src="processRecycleBinCover(item.cover)"
                  mode="aspectFill"
                  class="cover-image"
                  @error="onCoverError"
                />
                <view class="item-type-badge">
                  <text class="type-text">
                    {{ getRecycleBinTypeInfo(item.itemType).label }}
                  </text>
                </view>
              </view>

              <view class="item-info">
                <text class="item-title">
                  {{ item.title }}
                </text>
                <text class="item-group">
                  {{ item.groupTitle }}
                </text>
                <view class="item-meta">
                  <text v-if="item.bookCount" class="book-count">
                    {{ item.bookCount }}本
                  </text>
                  <text class="delete-time">
                    {{ formatDeleteTime(item.deletedAt) }}
                  </text>
                </view>
                <view v-if="item.expireAt" class="expire-info">
                  <text
                    class="expire-text"
                    :style="{ color: getExpireStatus(item.expireAt).color }"
                  >
                    {{ getExpireStatus(item.expireAt).text }}
                  </text>
                </view>
              </view>

              <view v-if="!isEditMode" class="item-actions">
                <view class="action-btn restore-action" @click.stop="onRestoreItem(item)">
                  <uni-icons type="redo" size="16" color="#4caf50" />
                </view>
                <view class="action-btn delete-action" @click.stop="onDeleteItem(item)">
                  <uni-icons type="trash" size="16" color="#ff6b6b" />
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 加载更多 -->
        <view v-if="hasMore" class="load-more">
          <uni-load-more
            :status="loadMoreStatus"
            content-text="{ contentText: { contentdown: '上拉加载更多', contentrefresh: '加载中...', contentnomore: '没有更多了' } }"
            @click-load-more="loadMore"
          />
        </view>

        <!-- 没有更多数据 -->
        <view v-else-if="groups.length > 0" class="no-more-data">
          <text>没有更多了</text>
        </view>
      </view>
    </view>

    <!-- 还原确认弹窗 -->
    <uni-popup ref="restorePopup" type="dialog">
      <uni-popup-dialog
        type="info"
        title="确认还原"
        :content="getRestoreConfirmText()"
        @confirm="confirmRestoreItem"
        @close="cancelRestoreItem"
      />
    </uni-popup>

    <!-- 删除确认弹窗 -->
    <uni-popup ref="deletePopup" type="dialog">
      <uni-popup-dialog
        type="warn"
        title="确认删除"
        :content="getDeleteConfirmText()"
        @confirm="confirmDeleteItem"
        @close="cancelDeleteItem"
      />
    </uni-popup>

    <!-- 批量还原确认弹窗 -->
    <uni-popup ref="batchRestorePopup" type="dialog">
      <uni-popup-dialog
        type="info"
        title="批量还原"
        :content="getBatchRestoreConfirmText()"
        @confirm="confirmBatchRestore"
        @close="cancelBatchRestore"
      />
    </uni-popup>

    <!-- 批量删除确认弹窗 -->
    <uni-popup ref="batchDeletePopup" type="dialog">
      <uni-popup-dialog
        type="warn"
        title="批量删除"
        :content="getBatchDeleteConfirmText()"
        @confirm="confirmBatchDelete"
        @close="cancelBatchDelete"
      />
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
.trash-container {
  background-color: #f8f9fa;
  min-height: 100vh;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;

  .nav-back {
    padding: 5px;
  }

  .nav-title {
    flex: 1;
    //text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }

  .nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    .action-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px 12px;
      border-radius: 16px;
      background-color: #f5f5f5;
      transition: all 0.3s ease;

      .action-text {
        font-size: 14px;
        color: #333;
      }

      &:active {
        background-color: #e0e0e0;
        transform: scale(0.95);
      }
    }

    .refresh-btn {
      padding: 8px;
      border-radius: 50%;
      background-color: #f5f5f5;
      transition: all 0.3s ease;

      &:active {
        background-color: #e0e0e0;
        transform: scale(0.95);
      }
    }
  }
}

.batch-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;

  .select-all {
    display: flex;
    align-items: center;
    gap: 8px;

    .select-text {
      font-size: 14px;
      color: #333;
    }
  }

  .batch-buttons {
    display: flex;
    gap: 10px;

    .batch-btn {
      padding: 8px 16px;
      border-radius: 16px;
      font-size: 14px;
      border: none;
      transition: all 0.3s ease;

      &.restore-btn {
        background-color: #4caf50;
        color: #fff;

        &:disabled {
          background-color: #ccc;
          color: #999;
        }

        &:not(:disabled):active {
          background-color: #45a049;
          transform: scale(0.95);
        }
      }

      &.delete-btn {
        background-color: #ff6b6b;
        color: #fff;

        &:disabled {
          background-color: #ccc;
          color: #999;
        }

        &:not(:disabled):active {
          background-color: #ff5252;
          transform: scale(0.95);
        }
      }
    }
  }
}

.tip-bar {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background-color: #fff3e0;
  margin: 15px;
  border-radius: 8px;
  border-left: 4px solid #ff9800;

  .tip-text {
    font-size: 14px;
    color: #ff9800;
    margin-left: 8px;
  }
}

.loading-container {
  padding: 50px 20px;
  text-align: center;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;

  .empty-icon {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    opacity: 0.6;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .empty-text {
    font-size: 16px;
    color: #666;
    margin-bottom: 8px;
  }

  .empty-tips {
    font-size: 14px;
    color: #999;
  }
}

.trash-content {
  padding: 0 15px;
}

.groups-list {
  .group-section {
    margin-bottom: 20px;

    .group-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0;
      margin-bottom: 8px;

      .group-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }

      .group-count {
        font-size: 12px;
        color: #999;
        background-color: #f0f0f0;
        padding: 2px 8px;
        border-radius: 10px;
      }
    }

    .group-items {
      .trash-item {
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
        position: relative;

        &:active {
          transform: scale(0.98);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        }

        &.edit-mode {
          padding-left: 50px;
        }

        &.selected {
          border: 2px solid #667eea;
          background-color: #f8f9ff;
        }

        .item-selector {
          position: absolute;
          left: 15px;
          top: 50%;
          transform: translateY(-50%);
          padding: 5px;
        }

        .item-cover {
          width: 60px;
          height: 75px;
          border-radius: 8px;
          margin-right: 15px;
          position: relative;
          overflow: hidden;
          background-color: #f5f5f5;

          .cover-image {
            width: 100%;
            height: 100%;
            border-radius: 8px;
          }

          .item-type-badge {
            position: absolute;
            bottom: 2px;
            right: 2px;
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 4px;
            padding: 2px 4px;

            .type-text {
              font-size: 10px;
              color: #fff;
            }
          }
        }

        .item-info {
          flex: 1;
          min-width: 0;

          .item-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .item-group {
            font-size: 14px;
            color: #666;
            margin-bottom: 6px;
          }

          .item-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;

            .book-count {
              font-size: 12px;
              color: #1976d2;
              background-color: #e3f2fd;
              padding: 2px 6px;
              border-radius: 4px;
            }

            .delete-time {
              font-size: 12px;
              color: #999;
            }
          }

          .expire-info {
            .expire-text {
              font-size: 12px;
              font-weight: 500;
            }
          }
        }

        .item-actions {
          display: flex;
          gap: 8px;

          .action-btn {
            padding: 8px;
            border-radius: 50%;
            transition: all 0.3s ease;

            &.restore-action {
              background-color: #e8f5e8;

              &:active {
                background-color: #c8e6c9;
                transform: scale(0.9);
              }
            }

            &.delete-action {
              background-color: #fff5f5;

              &:active {
                background-color: #ffebee;
                transform: scale(0.9);
              }
            }
          }
        }
      }
    }
  }
}

.load-more {
  padding: 20px 0;
}

.no-more-data {
  text-align: center;
  padding: 20px 0;
  font-size: 12px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .trash-content {
    padding: 0 10px;
  }

  .groups-list .group-section .group-items .trash-item {
    padding: 12px;
    margin-bottom: 10px;

    &.edit-mode {
      padding-left: 45px;
    }

    .item-cover {
      width: 50px;
      height: 65px;
      margin-right: 12px;
    }

    .item-info .item-title {
      font-size: 15px;
    }
  }
}
</style>
